@import "../../../style/index.less";

@short_tip_row_color: @color_grey_800;
@empty_text_label_color: @color_grey_800;
@textarea_border: 1px solid @color_grey;
@textarea_hover_border_color: @color_info;
@textarea_error_border_color: @color_delete;
@strong_color: @color_delete;
@select_group_row_font_color: @color_font_800;
@select_group_row_bg_color: @color_grey;
@select_group_row_hover_bg_color: @color_info_100;
@select_group_row_selected_bg_color: @color_info_200;
@select_group_row_selected_icon_color: @color_info_700;
@select_group_row_warning_hover_bg_color: @color_delete_100;
@select_group_row_warning_selected_bg_color: @color_delete;
@select_group_row_warning_selected_icon_color: @color_delete_700;

@tab_row_bg_color: @color_grey;
@tab_row_font_color: @color_font_800;
@tab_row_hover_bg_color: @color_info_100;
@tab_row_selected_bg_color: @color_info_200;

@radio_row_disabled_bg_color: @color_grey;

@slider_tip_color: @color_grey_800;
@progress_tip_color: @color_grey_800;

@display_box_bg_color: @color_grey;
@display_box_border_color: @color_cancel_600;

@account_color: @color_warning;
@account_gray_color: @color_grey_700;

@data_list_bg_color: @color_grey;
@data_list_border_color: @color_cancel_600;

@psw_input_danger_border_color: @color_delete;
@psw_input_border_color: @color_info;
@psw_eye_color: @color_grey_700;
@psw_eye_selected_color: @color_grey_800;

@key_value_table_remove_color: @color_delete;

.halo-com-modal-common {
  line-height: 18px;
  &.modal-bd {
    padding: 30px 36px 46px 0px;
    min-height: 18px;
    max-height: 470px;
    overflow-y: auto;
  }

  .modal-row {
    display: flex;
    align-items: center;
    padding-left: 36px;

    &:not(:first-child) {
      margin-top: 18px;
    }

    &.label-row {
      padding-left: 0;

      >div:first-child {
        .fixed-width(100px);
        text-align: right;
        margin-right: 12px;

        >strong {
          color: @strong_color;
        }
      }
      >div:last-child {
        flex: 1;
        max-width: 392px;
      }

      &.long-label-row {
        >div:first-child {
          .fixed-width(134px);
        }
        >div:last-child {
          max-width: 358px;
        }
      }
    }

    &.hide {
      display: none;
    }

    &.charge-row {
      height: 20px;
      padding-left: 0;
      > div.label-row {
        padding-left: 110px;
      }
      > div.long-label-row {
        padding-left: 144px;
      }
      .account-box {
        display: inline-block;
        height: 18px;
        line-height: 18px;
        > div {
          display: inline-block;
          margin-right: 4px;
          > strong {
            color: @account_color;
            font-weight: normal;
          }
          &.account-md {
            font-size: 14px;
          }
          &.account-gray {
            color: @account_gray_color;
          }
        }
      }
    }

    &.checkbox-row {
      padding-left: 36px;
      height: 18px;

      >input[type="checkbox"] {
        margin-right: 7px;
        height: 18px;
        line-height: 18px;
        margin-top: 3px;
      }
      >label {
        vertical-align: middle;
      }
      &.label-row {
        padding-left: 110px;
      }
      &.long-label-row {
        padding-left: 144px;
      }
    }

    &.display-box-row {
      padding: 20px;
      margin-top: 16px;
      background-color: @display_box_bg_color;
      border: 1px solid @display_box_border_color;
      margin-left: 36px;
      > div {
        width: 50%;
        display: inline-block;

        .glyphicon {
          margin-right: 8px;
        }
      }
    }

    &.short-tip-row {
      color: @short_tip_row_color;
      margin-top: 0;

      &.label-row {
        padding-left: 110px;
      }
      &.long-label-row {
        padding-left: 144px;
      }
    }

    &.input-row {
      align-items: baseline;
      input {
        width: 100%;
        box-sizing: border-box;
        height: 32px;
      }
      .short-tip-row {
        padding-left: 0;
      }
    }

    &.input-password-row {
      align-items: baseline;
      position: relative;
      input {
        width: 100%;
        height: 32px;
        box-sizing: border-box;
        padding-right: 28px;
      }
      .icon-eye {
        position: absolute;
        top: 9px;
        right: 8px;
        margin-left: 8px;
        font-size: 15px;
        cursor: pointer;
        color: @psw_eye_color;
        &:hover,
        &.selected {
          color: @psw_eye_selected_color;
        }
      }
      .icon-eye:hover + input {
        border-color: @psw_input_border_color;
      }
      .icon-eye:hover + input.error {
        border-color: @psw_input_danger_border_color;
      }
      .short-tip-row {
        padding-left: 0;
      }
    }

    &.textarea-row {
      align-items: flex-start;
      height: 100px;

      >div:first-child {
        padding-top: 5px;
      }
      textarea {
        height: 100px;
        line-height: 22px;
        width: 100%;
        border: @textarea_border;
        padding: 4px 10px;
        overflow: auto;
        box-sizing: border-box;
        resize: none;

        &:hover,
        &:focus {
          border-color: @textarea_hover_border_color;
        }

        &.error {
          border-color: @textarea_error_border_color
        }
      }
      .short-tip-row {
        padding-left: 0;
      }
    }

    &.icon-label-row {
      align-items: flex-start;
      .glyphicon {
        margin-right: 8px;
      }

      > div:last-child {
        max-width: 400px;
        word-wrap: break-word;
      }
    }

    &.select-group-row {
      align-items: baseline;
      .empty-text-label {
        color: @empty_text_label_color;
      }
      >div:last-child {
        max-height: 116px;
        overflow-y: auto;
      }
      a.items {
        color: @select_group_row_font_color;
        background-color: @select_group_row_bg_color;
        display: block;
        height: 32px;
        line-height: 32px;
        border-radius: 2px;
        padding-left: 12px;

        &:not(:last-child) {
          margin-bottom: 10px;
        }

        .icon-active-yes {
          color: @select_group_row_bg_color;
        }

        &:hover,
        &.selected {
          .icon-active-yes {
            float: right;
            margin: 9px 9px 0 0;
          }
        }

        &:hover {
          background-color: @select_group_row_hover_bg_color;

          .icon-active-yes {
            color: #fff;
          }
        }

        &.selected {
          background-color: @select_group_row_selected_bg_color;

          .icon-active-yes {
            color: @select_group_row_selected_icon_color;
          }
        }
      }

      &.warning-row {
        a {
          &:hover {
            background-color: @select_group_row_warning_hover_bg_color;
          }
          &.selected {
            background-color: @select_group_row_warning_selected_bg_color;
            color: #fff;

            .icon-active-yes {
              color: #fff;
            }
          }
        }
      }
    }

    &.select-single-row {
      align-items: baseline;
      > div:last-child > div {
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0;
        }
        a {
          width: 100%;
          margin-right: 2%;
          display: inline-block;
          color: @tab_row_font_color;
          background-color: @tab_row_bg_color;
          height: 32px;
          line-height: 32px;
          border-radius: 2px;
          text-align: center;

          &:hover {
            background-color: @tab_row_hover_bg_color;
          }

          &.selected {
            background-color: @tab_row_selected_bg_color;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    &.tab-row {
      span {
        color: @empty_text_label_color;
      }
      >div:last-child {
        display: flex;

        a {
          display: inline-block;
          color: @tab_row_font_color;
          background-color: @tab_row_bg_color;
          height: 32px;
          line-height: 32px;
          border-radius: 2px;
          text-align: center;
          margin-right: 14px;
          flex: 1;
          .overflow();

          &:hover {
            background-color: @tab_row_hover_bg_color;
          }

          &.selected {
            background-color: @tab_row_selected_bg_color;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    &.select-row,
    &.radio-input-row {
      height: 32px;
      >div:last-child {
        display: flex;
        align-items: center;

        input[type="radio"] {
          vertical-align: middle;
          margin-right: 8px;
          .fixed-width(16px);
          height: 18px;
        }
        select {
          flex: 1;
        }
        .radio-input {
          flex: 1;
          width: 100%;
        }
        .radio-input >input{
          width: 100%;
          height: 32px;
          box-sizing: border-box;
        }
        .radio-input >.short-tip-row {
          padding-left: 0;
        }
        .empty-text-label {
          color: @empty_text_label_color;
        }
      }
    }

    &.slider-row {
      align-items: flex-start;
      >div:last-child {
        display: flex;
        user-select: none;

        .slidearea {
          flex: 1;
          position: relative;
          margin-right: 16px;
          .dragarea {
            background-color: #f0f0f0;
            height: 15px;
            .selectedarea {
              background-color: #9de6f1;
              height: 15px;
            }
            .thumbnail {
              position: absolute;
              width: 1px;
              height: 11px;
              border: 5px solid #00afc8;
              border-radius: 1px;
              top: -3px;
              cursor: pointer;
              background-color: #fff;
            }
          }
          .range {
            float: right;
            color: @slider_tip_color;
            margin-top: 10px;
          }
          .slider {
            width: auto;
          }
        }
        .inputarea {
          .fixed-width(105px);
          >input[type="text"] {
            height: 28px;
            line-height: 20px;
            padding: 4px 5px;
            width: 62px;
            margin-right: 10px;
            box-sizing: border-box
          }
        }
      }
    }

    &.progress-row {
      display: flex;
      margin-left: 76px;

      >div:first-child {
        flex: 1;
        margin-right: 16px;
        margin-bottom: 5px;
        color: @progress_tip_color;
      }
      >div:last-child {
        .fixed-width(105px);
        padding-top: 16px;
      }

      &.hide {
        display: none;
      }
    }

    &.data-list-row {
      margin-left: 36px;
      padding: 20px;
      background-color: @data_list_bg_color;
      border: 1px solid @data_list_border_color;
      display: block;
      max-height: 162px;
      overflow-y: auto;

      .item,
      .item-name,
      .item-status {
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
        display: inline-block;
        vertical-align: middle;
      }

      .item {
        width: 50%;
        height: 20px;
        line-height: 20px;
        .item-name {
          width: 100%;
          .glyphicon {
            &:first-child {
              margin-right: 8px;
            }
          }
        }
        &.has-status {
          .item-name,
          .item-status {
            width: 50%;
            padding: 0 6px 0 1px;
            box-sizing: border-box;
          }
        }
      }
    }

    &.key-value-table {
      flex-direction: column;
      align-items: initial;
      .input-area {
        display: flex;
        > div {
          flex: 1;
          display: flex;
          margin-right: 10px;
          > * {
            width: 100%;
          }
        }
        margin-bottom: 10px;
      }
      .table-content {
        width: 100%;
        .table-body {
          height: 220px;
          i.remove-operation {
            font-size: 16px;
            font-weight: bold;
            color: @key_value_table_remove_color;
            cursor: pointer;
          }
        }
      }
    }
    &.key-value {
      .input-data {
        border-bottom: 1px solid @display_box_bg_color;
        .item {
          min-width: 130px;
          max-width: 130px;
        }
        > div {
          justify-content: center;
        }
      }
      .input-area, .input-data {
        display: flex;
        .item {
          text-align: center;
          i:hover {
            cursor: pointer;
            color: @strong_color;
          }
        }
        > div {
          flex: 1;
          display: flex;
          margin-right: 10px;
          > * {
            width: 100%;
          }
        }
        margin-bottom: 10px;
      }
    }
  }
}
